<template>
  <div class="page">
    <Navbar title="中介详情" />
    <div class="content">
      <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
        <div
          class="list-item"
        >
          <div class="list-item-header f-r a-c">
            <span class="title">{{ detail.corporateName }}</span>
          </div>
          <div class="score f-r a-c">
            综合评分：
            <van-rate
              :value="detail.score"
              allow-half
              :size="12"
              color="#EA9518"
              void-icon="star"
              void-color="#eee"
            />
            <span class="score-value">{{ detail.score }}</span>
          </div>
          <div class="score f-r a-c j-b">
            荣誉排行：{{ index }}
          </div>
          <div class="score">
            <div class="count">
              办件评价量：<span style="color: #2F86FD">{{ detail.sum }}</span>件
            </div>
          </div>
          <div class="score f-r a-c j-b">
            单位性质：{{ detail.unitType }}
          </div>
          <div class="score f-r a-c j-b">
            统一社会信用代码：{{ detail.creditCode }}
          </div>
          <div class="score f-r a-c j-b">
            注册地址：{{ detail.registeredAddress }}
          </div>
          <div class="score f-r a-c j-b">
            法定代表人姓名：{{ detail.legalName }}
          </div>
          <div class="score f-r a-c j-b">
            经营范围：{{ detail.manageRange }}
          </div>
          <!-- <div style="font-size: 12px;color: #2F86FD" @click="show = !show">{{ show == 0 ? '展开':'收起' }}</div> -->
        </div>
        <div
          class="list-item"
        >
          <div class="list-item-header f-r a-c" style="margin-bottom: 17px">
            <span class="title">评价详情</span>
          </div>
          <van-tabs v-model="activeTab" color="#4B93FE" @change="onRefresh">
            <van-tab title="用户评价" :name="1" />
            <van-tab title="窗口评价" :name="2" />
          </van-tabs>
          <van-empty v-if="!detailList.length" description="暂无数据" />
          <div
            v-for="(item,index) in detailList"
            :key="index"
            class="sub-item"
          >
          <div class="score">
              项目名称：{{ item.projectName }}
            </div>
            <div class="score">
              事项名称：{{ item.eventName }}
            </div>

            <div class="score">
              评价结果： <van-rate
              :value="item.score"
              allow-half
              :size="12"
              color="#EA9518"
              void-icon="star"
              void-color="#eee"
            />
            <span class="score-value">{{ item.score }}</span>
            </div>
            <div class="score">
              评价描述：{{ item.comment}}
            </div>
            <div class="score">
              追加评价：{{ getchoice(item.choice)}}
            </div>
            <div class="score">
              评价时间：{{ item.createTime }}
            </div>
          </div>

        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import refresh from '@/mixins/refresh'
import { http_mediation } from '@/api'

export default {
  name: 'MediationDetail',
  mixins: [refresh],
  data() {
    return {
      detail: {
      },
      detailList: [

      ],
      index: 0,
      activeTab: '1',
      show: 0
    }
  },
  created() {
    const { id, index } = this.$route.query
    this.index = index
    http_mediation.getDetail({
      id: id
    }).then(res => {
      this.detail = res.data
    })
    http_mediation.opList({ intermediaryId: id, userType: 2 }).then(res => {
      this.detailList = res.data
    })
  },
  methods: {
    getList() {
      const { id } = this.$route.query
      if (this.activeTab === 1) {
        http_mediation.opList({ intermediaryId: id, userType: 2 }).then(res => {
          this.detailList = res.data
        })
      } else {
        http_mediation.opList({ intermediaryId: id, userType: 1 }).then(res => {
          this.detailList = res.data
        })
      }
    },
    getchoice(list) {
      const arr = ['', '速度快', '服务好', '技术强', '诚信优']
      let arrstring = ''
      if (list !== null) {
        list = list.substring(1, list.length - 1).split(',')
        const arrlist = []
        for (let i = 0; i < list.length; i++) {
          arrlist.push(arr[list[i]])}
        arrstring = arrlist.toString()
      }
      return arrstring
    }
  }
}
</script>

<style scoped lang="scss">
.page {
    .list-item {
        padding: 12px 20px;
        background-color: #fff;
        margin-bottom: 13px;
        border-radius: 10px;
        .sub-item {
            border-bottom: 1px solid #C5C5C5;
            margin-bottom: 13px;
        }
        .list-item-footer {
            .count {
                font-size: 12px;
                line-height: 12px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #666666;
            }
            .tobtn {
                font-size: 12px;
                line-height: 12px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #2F86FD;
            }
        }
        .list-item-header {
            margin-bottom: 10px;
            img {
                width: 18px;
                height: 20px;
                margin-right: 7px;
            }
            .title {
                font-size: 16px;
                line-height: 16px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;
            }
        }

        .score {
            font-size: 12px;
            line-height: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            margin-bottom: 13px;
        }
    }
}
</style>
